<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="container"></div>
<script src="g2.js"></script>
<script>

  const data = [
    { ban: '1', ren: 38,laoshi:'张老师' },
    { ban: '2', ren: 52 ,laoshi: '王老师'},
    { ban: '3', ren: 61,laoshi: '黄老师' },

  ];
  const chart = new G2.Chart({
    container: 'container',
    autoFit: true,
    height: 500,
  });

  chart.data(data);
  chart.scale('laoshi', {
    nice: true,
  });

  chart.tooltip({
    showMarkers: false
  });
  chart.interaction('active-region');

  chart.interval().position('ban*ren').color('laoshi*ren',(laoshi,ren)=>{
    if(laoshi == '张老师' || ren <= 40){
      return 'green'
    }
    return 'red'
  });

  chart.render();

</script>
</body>
</html>
